<template>
	<view>
		<nav-bars :bgColor="scrollData >= 200 ? '#f8f1e1' : '#f8f1e1'" title="审核中"></nav-bars>
		<view class="TitleMain"></view>
		<view class="MainView">
			<view class="MessageView">
				<view class="MessageText">最高可提额（元）</view>
				<view class="MessagePirce">200000</view>
				<view class="dividerView"><view class="dividerText">补充资料越多，可提额度越高</view></view>
			</view>
		</view>
		<view class="ListView">
			<view class="ListRightBg"></view>
			<view class="ListRightBgText">资料越全，提额越高</view>
			<view class="ListTitle">填写资料提额</view>
			<view class="ListMain">
				<view class="ListItem" v-for="(item, index) in list" :key="index">
					<view class="ListIcon"><image :src="baseImg + item.image"></image></view>
					<view>
						<view class="ListItemTitle">{{ item.title }}</view>
						<view class="ListItemText">
							<view>{{ item.status }}</view>
							<text class="iconfont icon-more"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: '',
	components: {},
	data() {
		return {
			scrollData: 0,
			baseImg: 'https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com',
			list: [
				{ image: '/static/loan/Credit.png', title: '建行信用卡', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/education.png', title: '全日制本科', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/social.png', title: '社保', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/fund.png', title: '公积金', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/wages.png', title: '银行代发工资', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/Userdata.png', title: '建行优质客户', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/License.png', title: '营业执照', status: '已完成，可更新', path: '' },
				{ image: '/static/loan/mortgage.png', title: '按揭用户', status: '已完成，可更新', path: '' }
			]
		};
	},
	onLoad(options) {
		// console.log(options);
		// this.getAccountInfo();
	},
	onPageScroll(e) {
		this.scrollData = e.scrollTop;
	},
	methods: {}
};
</script>
<style lang="less">
page {
	background: #f8f1e1;
}
.TitleMain {
	height: 200rpx;
	background: url(https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/titleText.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.MainView {
	margin: 15rpx 30rpx 30rpx 30rpx;
	background: url(https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/Main.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 320rpx;
	.MessageView {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: inherit;
		.MessageText {
			text-align: center;
			font-size: 26rpx;
			font-weight: 500;
			color: #342a29;
			margin-bottom: 12rpx;
		}
		.MessagePirce {
			text-align: center;
			font-size: 84rpx;
			font-weight: bold;
			color: #342a29;
			margin-bottom: 12rpx;
		}
		.dividerView {
			position: relative;
			font-size: 24rpx;
			font-weight: 500;
			color: #7f7768;
		}
		.dividerView ::after {
			content: '';
			position: absolute;
			width: 60rpx;
			height: 2rpx;
			right: -122rpx;
			top: 50%;
			transform: translate(-50%, 0);
			background: linear-gradient(90deg, #988f80 0%, rgba(223, 202, 169, 0) 100%);
			opacity: 0.5;
		}
		.dividerView ::before {
			content: '';
			position: absolute;
			width: 60rpx;
			height: 2rpx;
			left: -66rpx;
			top: 50%;
			transform: translate(-50%, 0);
			background: linear-gradient(-90deg, #988f80 0%, #e3d4b8 100%);
			opacity: 0.5;
		}
	}
}
.ListView {
	margin: 30rpx 30rpx 40rpx 30rpx;
	padding: 36rpx 50rpx 0 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	position: relative;
	.ListRightBg {
		width: 345rpx;
		height: 88rpx;
		position: absolute;
		top: 0;
		right: 0;
		background: url(https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/sbg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.ListRightBgText {
		position: absolute;
		top: 20rpx;
		right: 60rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #7f7768;
	}
	.ListTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #342a29;
		margin-bottom: 70rpx;
	}
	.ListMain {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		.ListItem {
			display: flex;
			align-items: center;
			margin-bottom: 70rpx;
			.ListIcon {
				width: 80rpx;
				height: 80rpx;
				background: #f7f6f3;
				border-radius: 50%;
				padding: 19rpx;
				margin-right: 20rpx;
			}
			.ListItemTitle {
				font-size: 28rpx;
				font-weight: bold;
				color: #342a29;
				margin-bottom: 12rpx;
			}
			.ListItemText {
				font-size: 22rpx;
				font-weight: 500;
				color: #898a90;
				display: flex;
				align-items: center;
				.icon-more {
					margin-top: -4rpx;
				}
			}
		}
	}
}
</style>
